<template>
  <div v-if="isShow" class="base-info" :style="{ width }">
    <div class="info-label">{{ label }}:</div>
    <div :class="[isScroll ? 'scroll-info-value' : 'info-value']">
      <span v-if="!scopedSlots || !isShow">{{ value || '--' }}</span>
      <template v-else>
        <slot :name="scopedSlots"></slot>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    label: {
      type: [String, Number],
      default: '',
    },
    value: {
      type: [String, Number, Array, Object],
      default: '',
    },
    scopedSlots: {
      type: String,
      default: '',
    },
    width: {
      type: String,
      default: '100%',
    },
    isShow: {
      type: Boolean,
      default: true,
    },
    isScroll: {
      type: Boolean,
      default: false,
    },
  },
};
</script>
<style lang="scss" scoped>
.base-info {
  display: inline-flex;
  flex-direction: column;
  margin-bottom: 20px;
  .info-label {
    margin-bottom: 6px;
    min-width: 72px;
    font-weight: bold;
  }
  .info-value {
    flex: 1;
  }
  .scroll-info-value {
    flex: 1;
    max-height: 140px;
    overflow-y: scroll;
    margin-right: 10px;
  }
}
</style>
